import { Button } from 'antd';
import { SvgIcon } from '../icon';
import { useRouter } from '@/router/hooks';

type Props = {
  title?: string;
  size?: number;
  onClick?: () => void;
  className?: string;
};

export default function Back({ title, size, onClick, className }: Props) {
  const router = useRouter();

  const titleStyle: React.CSSProperties = {
    flexShrink: 0,
    fontWeight: 400,
    fontSize: '14px',
    color: 'var(--text-3)',
  };

  const handleClick = () => {
    if (onClick) {
      onClick();
    } else {
      router.back();
    }
  };

  return (
    <div className={`justify-left flex items-center ${className}`}>
      <Button type="text" onClick={handleClick} style={{ padding: '6px' }}>
        <SvgIcon icon="arrow-left" color="#4E5969" size={size ?? 20} />
      </Button>
      <span style={titleStyle}>{title}</span>
    </div>
  );
}
